<template>
	<view class="u-p-20">
		<view class="bg-white border-radius-20 u-p-30 u-m-b-30">
			<view class="flex flex-col py-20" @click="chooseAddress">
				<view class="u-m-b-10">{{$t('yuncang.提货地址')}}{{$t('common.:')}}</view>
				<view class="flex flex-row items-center">
					<view class="flex flex-col e-flex-1">
						<text>{{makeAddress(address)}}</text>
						<view class="c-999">
							<text class="mr-10">{{address.name}}</text>
							<text>{{address.phone}}</text>
						</view>
					</view>
					<view class="u-m-l-10 right-arrow" :style="{borderColor: '#999'}"></view>
				</view>
			</view>
		</view>


		<view class="bg-white u-p-30 border-radius-20 u-m-b-20">
			<view class="">
				<view class="goods-item flex flex-row">
					<image :src="$fullLink(coverImg)" class="cover" mode="aspectFit"></image>
					<view class="flex-1 u-m-l-20 ">
						<view class="u-font-32 u-m-b-10">
							{{info.name || "-"}}
						</view>
						<text class="c-999">{{$t('seckill.stock')}}:{{stock}}</text>
					</view>
				</view>
			</view>
			
			<u-line class="u-m-b-20 u-m-t-20"></u-line>
			
			<view class="numbers mt-20 flex flex-row items-center">
				<view class="flex-1">
					<text>{{$t('yuncang.请选择提货数量')}}</text>
				</view>
				<u-number-box v-model="num" :min="1" :max="stock" @change="getOrderPre"></u-number-box>
			</view>
		</view>
		
		<view class="bg-white border-radius-20 u-m-b-20 u-flex u-p-30">
			<text class="flex-1">{{$t('order.运费')}}{{$t('common.:')}}</text>
			<view class="">
				<text>{{$unitEn}}{{total.deliveryMoney || 0}}</text>
			</view>
		</view>
		
		
		<view class="fix-btn bg-white u-p-30">
			<view class="u-flex">
				<view class="flex-1">
					<text>{{$t('yuncang.提货金额')}}{{$t('common.:')}}</text>
					<text class="fw-600">{{$unitEn}}{{total.deliveryMoney || 0}}</text>
				</view>
				<button class="submit-btn u-flex-xy-center u-font-30 c-white" :style="{background: AppSkin.primary}" @tap="confirmPickup">{{$t('yuncang.确认提货')}}</button>
			</view>
		</view>
		
		<password-popup ref="passwordPopup" :payMoney="total.deliveryMoney" :show="passwordShow" @close="passwordShow = false" @confirm="passwordPay"></password-popup>
		
		<pay-popup ref="pay" :show="showPay" :isTrace="false" :isSystem="true"  :payMoney="total.deliveryMoney"
		@pay="handleChoosePayMenthod"
		@close="handleCancelPay"
		></pay-popup>
	</view>
</template>

<script>
import { pickupConfirmApi, pickupGoodsStockApi, pickupOrderDetailApi, pickupOrderPreApi } from '../../common/request/api/yuncang';
	export default {
		data() {
			return {
				address: {},
				num: 1,
				lastNum:1,
				stock:0,
				passwordShow:false,
				payMoney:10,
				id:"",
				info:{
					description:{}
				},
				total:{},
				showPay:false
			};
		},
		watch:{

		},
		computed:{
			coverImg () {
				const list = this.info?.description?.imgUrls?.split(',') || []
				return list[0]||''
			}
		},
		onLoad({id}) {
			this.id = id || ""
		},
		onShow() {
			this.load()
		},
		methods: {
			handleChoosePayMenthod(payId,pwd,isDefault,payType,pay_name){
				console.log(payId,pwd,isDefault,payType,pay_name)
				this.passwordPay(pwd,payId,payType).then(res=>{
					this.showPay = false
					uni.showToast({
						title:this.$t('yuncang.提货支付成功'),
						icon:'success',
						mask:true,
						duration:1000
					})
					setTimeout(()=>{
						uni.navigateBack({delta:1})
					},1000)
				})
			},
			handleCancelPay(){
				this.showPay = false
			},
			async load(){
				await pickupOrderDetailApi(this.id).then(res=>{
					this.info = res.data || {}
				})
				await pickupGoodsStockApi(this.id).then(res=>{
					this.stock = res.data
				})
				await this.getOrderPre()
			},
			getOrderPre(){
				if(!this.address.id)return
				pickupOrderPreApi({
					receivedId:this.address.id,
					commodityId:this.id,
					qty:this.num
				}).then(res=>{
					this.total = res.data
				})
			},
			passwordPay(password,payId="",payType=""){
				this.passwordShow = false
				return pickupConfirmApi({
					receivedId:this.address.id,
					commodityId:this.id,
					qty:this.num,
					payword:password,
					payId,
					payType
				}).then(res=>{
					if(res.code==200){
						return Promise.resolve(res)
					}else{
						throw new Error(res.msg||"")
					}
				})
			},
			confirmPickup(){
				if(!this.address || !this.address.id){
					return uni.showToast({
						title: '请选择地址',
						icon:'none'
					});
				}
				
				this.showPay = true
				// this.passwordShow = true
			},
			chooseAddress(){
				this.$goTo('/pages/user/receivingAddress/index',{
					type:1
				},{
					selectAddress:(e) =>{
						this.address = e
					}
				})
			},
			makeAddress(address){
				// this.getOrderPre() 
				let str = address?.nameExt + address?.address
				return str || "请选择提货地址"
			}
		}
	}
</script>

<style lang="scss">
	.right-arrow {
		border: 4rpx solid;
		width: 16rpx;
		height: 16rpx;
		border-left: none;
		border-bottom: none;
		transform: rotate(45deg);
	}

	.number-input {
		border: 1rpx solid #999;
		height: 1.4rem;
		border-radius: 8rpx;

		.left,
		.right {
			display: block;
			width: 48rpx;
			height: 42rpx;
			line-height: 40rpx;
			font-size: 40rpx;
			box-sizing: border-box;
		}

		.left {
			border: 0rpx solid #999 !important;
			border-right: 1rpx !important;
		}

		.right {
			border: 0rpx solid #999;
			border-left: 1rpx;
		}
	}
	
	.goods-item{
		.cover{
			width: 196rpx;
			height: 196rpx;
			background-color: #f3f3f3;
		}
	}
	.flex {
		display: flex;
	}
	.flex-col {
		flex-direction: column;
	}
	.fix-btn {
		width: 100vw;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.submit-btn {
		padding: 0 30rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}
</style>